<script setup>
import {
  onActivated,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onDeactivated,
  onMounted,
  onUnmounted,
  onUpdated, ref
} from "vue";

onBeforeMount(() => {
  console.log("Comp1 组件挂载之前");
})

onMounted(() => {
  console.log("Comp1 组件已经挂载");
})

onBeforeUpdate(() => {
  console.log("Comp1 组件更新之前");
})

onUpdated(() => {
  console.log("Comp1 组件已经更新");
})

onBeforeUnmount(() => {
  console.log("Comp1 组件卸载之前");
})

onUnmounted(() => {
  console.log("Comp1 组件已经卸载");
})

onActivated(() => {
  console.log("Comp1 组件已经可以活动");
})

onDeactivated(() => {
  console.log("Comp1 组件已经不在活动");
})

let count = ref(0)
</script>

<template>
  <h1>这是 Comp1 组件</h1>
  <h1>Hello, Vue!</h1>
  <h2>{{ count }}</h2>
  <button @click="--count">-</button>
  <button  @click="++count">+</button>
</template>

<style scoped>

</style>